<template>
	<view class="container">
		<view class="picker-container">
			<picker mode="selector" :range="pickerRange" @change="onPickerChange">
				<view class="picker-view">{{ selectedItem }}</view>
			</picker>
			<view @click="gotocollect()" style="margin-left: 50rpx;">
				<text>收藏内容</text>
			</view>
			<view class="iconBox" @click="collect()">
				<image :src="collectURL" mode="aspectFit" class="icon"></image>
			</view>
		</view>
		<view class="showArea">
			<text class="text">{{data}}</text>
			<text class="title">--{{form}}</text>
		</view>
		<button class="change-button" @click="changeText">换一个</button>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import db from '../../util/db';
import {onShow} from "@dcloudio/uni-app";
onMounted(()=>{
	changeText();
})

const pickerRange = ref(['诗歌', '文学', '笑话']);
const selectedItem = ref(pickerRange.value[0]);
const pickerindex = ref(0);
const data = ref("");
const form = ref("");
const changeText = () => {
	let url = "https://api.vvhan.com/api/ian/shici?type=json";
	console.log(pickerindex.value);
	if(pickerindex.value == 0){
		url = "https://api.vvhan.com/api/ian/shici?type=json";
	}
	else if(pickerindex.value == 1){
		url = "https://api.vvhan.com/api/ian/wenxue?type=json";
	}
	else if(pickerindex.value == 2){
		url = "https://api.vvhan.com/api/text/joke?type=json";
	}
	// 显示加载提示
	uni.showToast({
	    title: '正在加载',
	    icon: 'loading',
	    duration: 1500 // 持续时间，单位为毫秒，默认1500ms，这里设置为20秒
	});
	uni.request({
	url:url,
	method:'GET',
	timeout:1500,
	success: (res) => {
		// 请求成功的回调函数
		if (res.statusCode === 200) {
			uni.hideToast();
			collectURL.value = "../../static/收藏 (2).png";
			jugde.value = false;
			console.log(res.data); // 服务器返回的数据
			console.log(res.data.data.form);
			// data.value = res.data.data.content;
			typewriter(res.data.data.content);
			form.value = res.data.data.form;
			// 在这里处理你的数据
		} else {
			uni.hideToast();
			plus.nativeUI.alert("当前后台网络异常，请稍后再试");
			console.log("错误码为:",res.statusCode)
		}
	},
	fail: (err) => {
		// 请求失败的回调函数
		console.error(err);
		plus.nativeUI.alert("当前后台网络异常，请稍后再试");
		}
	})
};
// 定义打字效果函数
// 打字效果函数
function typewriter(text, interval = 100) {
  let index = 0;
 
  function typeCharacter() {
    if (index < text.length) {
      data.value += text.charAt(index); // 更新data.value
      index++;
      setTimeout(typeCharacter, interval); // 递归调用，创建延迟
    }
  }
  data.value="";
  // 开始打字效果
  typeCharacter();
}
// 定义picker的内容选择
const onPickerChange = (e) => {
	pickerindex.value = e.detail.value;
	selectedItem.value = pickerRange.value[pickerindex.value];
	// 这里可以根据选择的item执行其他操作
	console.log('选择了：', pickerindex.value);
};
// 定义收藏相关内容
const collectURL = ref("../../static/收藏 (2).png");
const jugde = ref(false);
async function collect()
{
	if(jugde.value == true)
	{
		await db.deleteCollect(data.value);
		console.log("删除收藏")
		collectURL.value = "../../static/收藏 (2).png";
		jugde.value = false;
		db.closeDatabase();
		return;
	}
	const p = await db.addCollect({
		content:data.value,
		form:form.value,
		type:pickerindex.value
	})
	console.log(p);
	if(p == 1)
	{
		collectURL.value = "../../static/收藏 (3).png";
	}
	jugde.value = true;
	db.closeDatabase();
}
// 跳转到收藏页面
function gotocollect(){
	uni.navigateTo({
		url:"/pages/collect/collect",
	});
}
</script>

<style scoped>
.iconBox{
	margin-left: 50rpx;
}
.icon{
	width: 60rpx;
	height: 60rpx;
}
.showArea{
	width: 100%;
	height:80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.container {
	background-color: #ebfaf9; /* 浅蓝色背景 */
	background-image: url("../../static/backimg/微信截图_20241213130305.png");
	/* 不让背景图重复 */
	background-repeat: no-repeat;
	/* 背景图覆盖整个背景区域（可以根据需要调整） */
	/* 但这里我们不希望它完全覆盖，所以后面会用position来调整显示区域 */
	background-size: cover; /* 或者使用具体尺寸，如 background-size: 200% 100%; 根据图片和容器比例调整 */
	/* 调整背景图片的位置，使其只显示部分区域 */
	/* 例如，这里我们让图片从右上角开始显示 */
	background-position: right top; 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	padding: 40rpx;
	box-sizing: border-box;
}

.text {
	width: 100%;
	font-size: 40rpx;
	text-align: left;
	font-weight: bold;
	padding-bottom: 50rpx;
}
.title {
	width: 100%;
	font-size: 40rpx;
	font-weight: bold;
	text-align: end;
}
.change-button {
	width: 300rpx;
	height: 100rpx;
	background-color: #72c1d9;
	color: #FFF;
	border-radius: 20rpx;
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}

.picker-container {
	display:flex;
	flex-direction: row;
	align-items: center;
	width:100%;
	z-index: 10;
}

.picker-view {
  width: 120rpx;
  height: 40rpx;
  background-color: #FFF;
  border: 1rpx solid #ccc;
  border-radius: 20rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}
</style>